﻿@page "/components/element"

<DocsPage>
    <DocsPageHeader Title="MudElement" SubTitle="A primitive component that allows you to create your own components and render the html element you want in an interactive way." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Basic example</Title>
                <Description>MudElement accepts all attributes you want, plus an <CodeInline>HtmlTag</CodeInline> parameter, that tells the component the html element that must render, and a <CodeInline>Class</CodeInline> and <CodeInline>Style</CodeInline> parameters, to style it</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <MudElementSimpleExample />
            </SectionContent>
            <SectionSource Code="MudElementSimpleExample" GitHubFolderName="Element" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Interactive example</Title>
                <Description>Change the rendered html element in an interactive way</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <MudElementChangingExample />
            </SectionContent>
            <SectionSource Code="MudElementChangingExample" GitHubFolderName="Element" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Passing a ref</Title>
                <Description>
                    You can pass an ElementReference to the root element that MudElement is going to render
                    <br />
                    Just make sure that you bind this reference to the 
                    <CodeInline>
                        Ref 
                    </CodeInline>
                    property of the MudElement
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <MudElementRefExample />
            </SectionContent>
            <SectionSource Code="MudElementRefExample" GitHubFolderName="Element" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>

    